<div class="tpl-user-panel-slide-toggleable" style="padding-left: 4px">
    <div class="tpl-user-panel-profile-picture" style="margin-left: 40px">
        <img th:attr="src=${session.currentUser.avatar}" alt=""/>

    </div>
    <script th:inline="javascript">
        $(function () {
            /*<![CDATA[*/
            var key = [[${session.currentUser.apiKey}]];
            /*]]>*/
            $('#my-popover').popover({
                content: key
            })
        });
    </script>

    <div style="color: #FFFFFF">

        <table class="am-table" style="color: #FFFFFF;text-align: center;border: none">
            <thead>
            <tr>
                <td>项目</td>
                <td>属性</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td >用户</td>
                <td th:text="${ session.currentUser.username}"></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td th:text="${ session.currentUser.email}"></td>
            </tr>
            <tr>
                <td>电话:</td>
                <td th:text="${ session.currentUser.phone}"></td>
            </tr>

            </tbody>
        </table>
    </div>
    <div style="color: #FFFFFF;margin-top: 30px">
        <button class="am-btn am-btn-danger" id="my-popover">查看APIKEY</button>
    </div>

</div>

<script>
    $(function () {
        $('#doc-prompt-toggle').on('click', function () {
            $('#my-prompt').modal({
                relatedTarget: this,
                onConfirm: function (e) {
                    alert('你输入的是：' + e.data || '')
                },
                onCancel: function (e) {
                    alert('不想说!');
                }
            });
        });
    });
</script>
